<template>
    <main-wrap style="background-color: #fff;">
        <div class="home">
            <div class="homeTop">
                <div class="topBox">
                    <div class="avatar"><Image :url="userStore.userInfo.avatar"/></div>
                    <div class="ms">
                        <h4>{{userStore.userInfo.name}}<div class="bmtxt" v-if="departments">{{convertDp(userStore.userInfo.department)}}</div></h4> 
                    </div>
                </div>
                <div class="userTab">
                    <RouterLink class="tabItem" :to="{ name: 'SimpleCustom',query:{userid:userStore.userInfo.userid} }">
                        <span><b>{{customTotal || 0}}</b></span>
                        <p>客户总数</p>
                    </RouterLink>
                    <RouterLink class="tabItem" :to="{ name: 'SimpleCustom',query:{starttime,endtime,userid:userStore.userInfo.userid} }">
                        <span><b>{{todayAddTotal || 0}}</b></span>
                        <p>今日新增客户</p>
                    </RouterLink>
                    <RouterLink class="tabItem" :to="{ name: 'Loss',query:{starttime,endtime,userid:userStore.userInfo.userid} }">
                        <span><b>{{todayLossTotal || 0}}</b></span>
                        <p>今日流失客户</p>
                    </RouterLink>
                </div>
            </div>
            <div class="homeMain">
                <ul class="hitemlist">
                    <li>
                        <RouterLink class="tabItem" :to="{ name: 'Qrcode'}">
                            <label>联系我</label>
                            <div class="iconbox">
                                <van-icon name="arrow" size="20px" color="#999"/>
                            </div>
                        </RouterLink>
                    </li>
                    <li>
                        <RouterLink class="tabItem" :to="{ name: 'SimpleCustom',query:{userid:userStore.userInfo.userid} }">
                            <label>我的客户</label>
                            <div class="iconbox">
                                <van-icon name="arrow" size="20px" color="#999"/>
                            </div>
                        </RouterLink>
                    </li>
                    <li>
                        <RouterLink class="tabItem" :to="{ name: 'Moment',query:{userid:userStore.userInfo.userid} }">
                            <label>我的朋友圈</label>
                            <div class="iconbox">
                                <van-icon name="arrow" size="20px" color="#999"/>
                            </div>
                        </RouterLink>
                    </li>
                    <li>
                        <RouterLink class="tabItem" :to="{ name: 'Groupmsg',query:{userid:userStore.userInfo.userid} }">
                            <label>我的群发消息</label>
                            <div class="iconbox">
                                <van-icon name="arrow" size="20px" color="#999"/>
                            </div>
                        </RouterLink>
                    </li>
                    <li>
                        <RouterLink class="tabItem" :to="{ name: 'Meeting',query:{userid:userStore.userInfo.userid} }">
                            <label>我的会议</label>
                            <div class="iconbox">
                                <van-icon name="arrow" size="20px" color="#999"/>
                            </div>
                        </RouterLink>
                    </li>
                </ul>
            </div>
        </div>
        <template v-slot:footer>
            <footer-nav/>
        </template>
    </main-wrap>
</template>
<script setup>
import { ref,onMounted } from "vue";
import{useRouter} from "vue-router"
import mainWrap from '@/components/mainWrap.vue'
import footerNav from '@/components/footerNav.vue'
import Image from "@/components/image.vue"
import {getJoinQrCode,getCustomList,getDepartmentList} from '@/api/qy-wechat-api'
import Cookies from "@/utils/auth.js"
import { useUserStore } from '@/stores/modules/user'
import moment from 'moment'

const router = useRouter()
const userStore = useUserStore()

let today = ''
const todayAddTotal = ref(0)
const todayLossTotal = ref(0)
const customTotal = ref(0)
const departments = ref('') // 部门列表
const starttime = ref('')
const endtime = ref('')

onMounted(async ()=>{
    today = moment().format('YYYY-MM-DD')
    starttime.value = moment(`${today} 00:00:01`).unix()
    endtime.value = moment(`${today} 23:59:59`).unix()
    myAnalys()

    const res = await getDepartmentList()  // 获取部门
    departments.value = res.data.department || []
    
    
})

const convertDp = (department)=>{
    let strArr = []
    department.forEach(item => {
        const fData = departments.value.find(it => it.id == item)
        if(fData){
            strArr.push(fData.name)
        }
    });
    return strArr.join(',')
 }

const myAnalys = ()=>{
    // 获取全部客户
    getCustomList({
        isUsable:true,
        userIds:[userStore.userInfo.userid],
    }).then(res =>{
        customTotal.value = res.data.data.length
    })
    // 获取今日新增客户
    getCustomList({
        isUsable:true,
        userIds:[userStore.userInfo.userid],
        start_time:moment(`${today} 00:00:01`).unix(),
        end_time:moment(`${today} 23:59:59`).unix()
    }).then(res =>{
        todayAddTotal.value = res.data.data.length
    })
    // 获取今日流失客户（删除）
    getCustomList({
        isDelete:true,
        userIds:[userStore.userInfo.userid],
        del_start_time:moment(`${today} 00:00:01`).unix()*1000,
        del_end_time:moment(`${today} 23:59:59`).unix()*1000
    }).then(res =>{
        todayLossTotal.value = res.data.data.length
    })
}



</script>

<style lang="scss" scoped>
.home{
    background: url('/images/cbg.png') left top no-repeat;
    background-size: 100% auto;
    background-color: #fff;
    .homeTop{
        font-size: 26px;
        padding: 30px 30px 0 30px;
        .topBox{
            height: 110px;
            display: flex;
            .avatar{
                width: 110px;
                height: 110px;
                border-radius:50% ;
                background: #fde685;
                overflow: hidden;
            }
            .ms{
                flex: 1;
                display: flex;
                padding: 0 0 0 20px;
                h4{
                    flex: 1;
                    padding: 10px 0 0 10px;
                    line-height: 50px;
                    color: #fff;
                    font-size: 30px;
                    font-weight: 500;
                    .bmtxt{
                        font-size: 26px;
                        color: #fff;
                    }
                    img{
                        width: 35px;
                        margin: 0 0 0 5px;
                    }
                }
                p{
                    display: flex;
                    height: 40px;
                    color: #999999;
                    align-items: center;
                    margin: 25px 0 0 0;
                    img{
                        width: 55px;
                    }
                }
            }
            .opBtnBox{
                display: flex;
                justify-content: center;
                align-items: center; 
                padding: 0 10px 0 0;
                .editBtn{
                    display: inline-block;
                    height: 52px;
                    line-height: 50px;
                    text-align: center;
                    border: 1px solid #ffffff;
                    border-radius:26px ;
                    color: #ffffff;
                    font-size: 26px;
                    margin: 0;
                    padding: 0 20px;
                    &+.editBtn{
                        margin-left: 20px;
                    }
                }
            }
            
        }
        .userTab{
            display: flex;
            margin: 22px 0 0 0;
            height: 200px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 5px 10px 10px #595857;
            .tabItem{
                position: relative;
                z-index: 10;
                flex: 1;
                text-align: center;
                padding: 40px 0 0 0;
                &+.tabItem{
                    &::before{
                        display: block;
                        content: '';
                        position: absolute;
                        z-index: 10;
                        left: 0;
                        top: 50px;
                        height: 90px;
                        width: 1px;
                        overflow: hidden;
                        background: #d4d4d4;
                    }
                }
                span{
                    display: block;
                    padding: 0;
                    font-size: 28px;
                    font-weight: normal;
                }
                b{
                    font-size: 42px;
                }
                p{
                    padding: 15px 0;
                    font-size: 28px;
                }
                .recharge{
                    display: block;
                    width: 144px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    background: #e3af2f;
                    border-radius:24px ;
                    color: #fff;
                    font-size: 24px; 
                    margin: 0 auto;
                }
                .withdrawal{
                    display: block;
                    width: 144px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    border: 1px solid #919192;
                    border-radius:24px ;
                    color: #cccccc;
                    font-size: 24px; 
                    margin: 20px auto 0 auto;
                }
            }
        } 
    }
    .homeMain{
        margin: -100px 0 0 0;
        background:url('/images/cbg2.png') left top no-repeat;
        background-size: 100% auto;
        width: 100%;
        padding: 100px 0 30px 0;
        font-size: 30px;
        .topicList{
            display: flex;
            height: 196px;
            li{
                flex: 1;
                text-align: center;
                font-size: 28px;
                height: 100%;
                a{
                    display: block;
                    height: 100%;
                    padding: 40px 0 0 0;
                }
                i{
                    display: block;
                    font-size: 60px;
                    color: #dbb038;
                }
                label{
                    display: block;
                    padding: 15px 0 0 0;
                }
            }
        }
        .homeMenuList{
            li{
                margin: 0;
                a{
                    display: flex;
                    height: 100px;
                    line-height: 98px;
                    padding: 0 25px;
                    font-size: 30px;
                    border-top: 1px solid #ecebeb;
                    &:hover{
                        background: #cccccc;
                    }
                    label{
                        flex: 1;
                    }
                    .ztIcon{
                        margin: 0 15px 0 0;
                        i{
                            color: #eac04e;
                        }
                    }
                    .jtIcon{
                        color: #8f8f8f;
                        i{
                            font-size: 40px;
                        }
                    }
                }
                
            }
        }
    }
} 
.hitemlist{
    list-style: none;
    padding: 80px 30px 20px 30px;
    margin: 0;
    li{
        margin: 0 0 20px 0;
        a{
            display: flex;
            background: #f8f8f8;
            border-radius: 10px;
            padding:20px 20px;
            box-shadow: 0 0 5px #d6d6d6;
            label{
                flex: 1;
            }
            
        }
        
    }

}
</style>